<template>
  <div class="every" v-if="echongs">
    <div class="roots" >
      <div class="titless">
        <img :src="echongs.data.datas.list[4].data.left.img_url" alt="" />
        <span>{{ echongs.data.datas.list[4].data.title }}</span>
        <span>{{ echongs.data.datas.list[4].data.stateTitle }}</span>
      </div>
      <div class="mrfqs">
        <div
          v-for="item in echongs.data.datas.list[4].data.goods"
          :key="item.gid"
        >
          <a
            href="https://wap.epet.com/surprise/Main.html?pet_type=dog&tid=18:00"
            v-lazy-container="{
        selector: 'img',
        error: 'https://wap.epet.com/app/images/error.png',
        loading: 'https://wap.epet.com/app/images/loading.png',
      }"
          >
            <p>
              <span>{{ item.reduce_price }}</span
              ><span>{{ item.discount }}</span>
            </p>
            <img :data-src="item.image.img_url" alt="" />
            <p>{{ item.brandName }}</p>
            <p>{{ item.subject }}</p>
            <div>
              <span>￥{{ item.sale_price }}</span
              >&nbsp;<del>￥{{ item.little_price }}</del>
            </div></a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "everyday",
  computed: {
    ...mapState(["echongs"]),
  },
 
};
</script>

<style scoped lang="less">
.every {
  width: 100%;
  background-color: rgb(247,247,247);
  padding-top: 0.2rem;
  > .roots {
    margin: 0 auto;
    width: 7.2rem;
    height: 4.4rem;
    background-color: rgb(255, 255, 255);
    border-radius: 0.2rem;
    overflow: hidden;
    box-sizing: border-box;
    .titless {
      width: 100%;
      margin: 0 auto;
      height: 0.576rem;
      font-size: 0.3rem;
      padding-top: 0.1rem;
      > img {
        width: 1.4rem;
        position: relative;
        top: 0.1rem;
        left: 0.1rem;
      }
      span {
        font-size: 0.2rem;
        color: rgb(255, 255, 255);
        padding: 0.06rem;
        background-color: rgb(239, 129, 102);
        border-radius: 0.2rem 0;
      }
      > span:nth-child(2) {
        position: relative;
        left: 0.3rem;
        background-color: rgb(0, 0, 0);
        margin-left: 0.2rem;
      }
      > span:nth-child(3) {
        padding-left: 0.4rem;
      }
    }
    
    .mrfqs {
      font-size: 0.2rem;
      width: 100%;
      height: 3.8rem;
      display: flex;
      justify-content: space-between;
      > div {
        background-color: rgb(253, 236, 232);
        height: 3.4rem;
        border-radius: .2rem;
        text-align: center;
        width: 24%;
        box-sizing: border-box;
        padding: 0.1rem;
        a {
          display: block;
          width: 100%;
          color: #000;
          > img {
            width: 90%;
          }
          > p {
            margin: 0;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > p:nth-child(3) {
            // background-color: rgb(255, 196, 196);
            margin: 0 auto;
            width: 70%;
          }
          > div {
            color: #fff;
            overflow: hidden;

            background-color: rgb(241, 107, 86);
            border-radius: 0.08rem;
            display: flex;
            > span {
              //   background-color: rgb(245, 181, 181);
              //   width: 40%;
              transform: scale(0.8);

            }
            > del {
              transform: scale(0.8);
               position: relative;
              display: block;
              left: -0.2rem;
            }
         
          }
        }
      }
    }
  }
}
</style>